h3.text-center.text-thin Connections

ul.nav
  // START list title
  li.p
    small.text-muted ONLINE
  // END list title
  li
    // START User status
    a(href="#").media-box.p.mt0
      span.pull-right
        span.circle.circle-success.circle-lg
      span.pull-left
        // Contact avatar
        img.media-box-object.img-circle.thumb48(src='img/user/05.jpg', alt="Image")
      // Contact info
      span.media-box-body
        span.media-box-heading
          strong Juan Sims
          br
          small.text-muted Designeer
    // END User status
    // START User status
    a(href="#").media-box.p.mt0
      span.pull-right
        span.circle.circle-success.circle-lg
      span.pull-left
        // Contact avatar
        img.media-box-object.img-circle.thumb48(src='img/user/06.jpg', alt="Image")
      // Contact info
      span.media-box-body
        span.media-box-heading
          strong Maureen Jenkins
          br
          small.text-muted Designeer
    // END User status
    // START User status
    a(href="#").media-box.p.mt0
      span.pull-right
        span.circle.circle-danger.circle-lg
      span.pull-left
        // Contact avatar
        img.media-box-object.img-circle.thumb48(src='img/user/07.jpg', alt="Image")
      // Contact info
      span.media-box-body
        span.media-box-heading
          strong Billie Dunn
          br
          small.text-muted Designeer
    // END User status
    // START User status
    a(href="#").media-box.p.mt0
      span.pull-right
        span.circle.circle-warning.circle-lg
      span.pull-left
        // Contact avatar
        img.media-box-object.img-circle.thumb48(src='img/user/08.jpg', alt="Image")
      // Contact info
      span.media-box-body
        span.media-box-heading
          strong Tomothy Roberts
          br
          small.text-muted Designer
    // END User status

  // START list title
  li.p
    small.text-muted OFFLINE
  // END list title
  li
    // START User status
    a(href="#").media-box.p.mt0
      span.pull-right
        span.circle.circle-lg
      span.pull-left
        // Contact avatar
        img.media-box-object.img-circle.thumb48(src='img/user/09.jpg', alt="Image")
      // Contact info
      span.media-box-body
        span.media-box-heading
          strong Lawrence Robinson
          br
          small.text-muted Developer
    // END User status
    // START User status
    a(href="#").media-box.p.mt0
      span.pull-right
        span.circle.circle-lg
      span.pull-left
        // Contact avatar
        img.media-box-object.img-circle.thumb48(src='img/user/10.jpg', alt="Image")
      // Contact info
      span.media-box-body
        span.media-box-heading
          strong Tyrone Owens
          br
          small.text-muted Designer
    // END User status
  li
    .p-lg.text-center
      // Optional link to list more users
      a.btn.btn-purple.btn-sm(href="#", title="See more contacts")
        strong Load more..

// Extra items
.p
  p: small.text-muted Tasks completion
  .progress.progress-xs.m0
    .progress-bar.progress-bar-success.progress-80(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100')
      span.sr-only 80% Complete
.p
  p: small.text-muted Upload quota
  .progress.progress-xs.m0
    .progress-bar.progress-bar-warning.progress-40(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100')
      span.sr-only 40% Complete